<script setup>
	import { ref } from 'vue'
	const popup = ref()
	const tabIndex = ref(1)
	const paymentType = [
		{ title: '微信支付', src: '/static/images/wechatpay-icon.png' },
		{ title: '支付宝支付', src: '/static/images/alipay-icon.png' },
	]
	const props = defineProps({
		orderId: String,
		amount: {
			type: [Number, String],
			default: 0,
		},
	})
	console.log(props)
	const emit = defineEmits(['close', 'change', 'confirm'])
	// 向组件外暴露方法
	defineExpose({ showPayment, hidePayment })
	function showPayment() {
		popup.value.open()
	}
	function hidePayment() {
		const { confirm } = uni.utils.modal(
			'关闭支付',
			'取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
			'仍要关闭',
			'继续支付'
		)
		if (!confirm) popup.value.close()
		else{
			popup.value.open()
		}
	}
	function confirm(index) {
		emit('confirm', index)
	}
	function onChannelChange(index) {
		tabIndex.value = index
	}
</script>
<template>
	<uni-popup
		ref="popup"
		background-color="#fff"
		:is-mask-click="false"
		type="bottom"
	>
		<view class="payment-container">
			<view class="payment-header">
				<text class="title">选择支付方式</text>
				<uni-icons
					class="uni-icons-close"
					size="18"
					color="#333"
					type="closeempty"
					@click="$emit('close')"
				/>
			</view>
			<view class="order-amount">¥ {{ props.amount }}元</view>
			<uni-list :border="false">
				<uni-list-item
					:title="item.title"
					:thumb="item.src"
					v-for="(item, index) in paymentType"
					:key="item.title"
					@click="onChannelChange(index)"
					clickable
				>
					<template #footer>
						<uni-icons
							v-if="tabIndex === index"
							size="26"
							color="#16C2A3"
							type="checkbox-filled"
						/>
						<uni-icons v-else size="26" color="#d1d1d1" type="circle" />
					</template>
				</uni-list-item>
			</uni-list>
			<button class="uni-button" @click="confirm(tabIndex)">立即支付</button>
		</view>
	</uni-popup>
</template>

<style lang="scss">
	.payment-container {
		min-height: 400rpx;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
		padding: 10rpx 30rpx 40rpx;

		.payment-header {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: #333;
			position: relative;
		}

		.uni-icons-close {
			position: absolute;
			top: 2rpx;
			right: 0;
		}

		.order-amount {
			padding: 10rpx 0 10rpx;
			text-align: center;
			font-size: 40rpx;
			color: #333;
		}

		:deep(.uni-list-item--hover) {
			background-color: #fff !important;
		}

		:deep(.uni-list-item__icon) {
			margin-right: 0;
		}

		.uni-button {
			margin-top: 40rpx;
		}
	}
</style>
